<template>
  <div class="main">
    <div class="input">
      <span>型号搜索</span>
      <el-input v-model="input" placeholder="请输入内容" style="width:200px" clearable />
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
    </div>
    <div class="list">
      <el-button type="warning" icon="el-icon-circle-plus-outline" @click="addType({})">新建</el-button>
      <el-table ref="multipleTable" :data="currentPageRecords" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="index" width="70" label="序号" />
        <el-table-column label="型号名称" width="200" prop="name" />
        <el-table-column prop="model" label="型号编码" width="200" />
        <el-table-column prop="image" label="设备图片" width="150">
          <template slot-scope="scope">
            <img style="width: 100%" :src="petImage(scope.row)">
          </template>
        </el-table-column>
        <el-table-column prop="vmRow" label="货道行" width="150" />
        <el-table-column prop="vmCol" label="货道列" width="150" />
        <el-table-column prop="channelMaxCapacity" label="设备容量" width="150" />
        <el-table-column prop="address" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="addType(scope.row)">修改</el-button>
            <el-button type="text" @click="del">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <deviceType :dialog-visible.sync="dialogVisible" v-if="edittype==={}" />
    <deviceType :dialog-visible.sync="dialogVisible" :edittype="edittype" v-else/>
  </div>
</template>

<script>
import { vmvmTypeAPI } from '@/api/vm'
import deviceType from './components/deviceType.vue'
export default {
  components: {
    deviceType
  },
  data() {
    return {
      input: '',
      currentPageRecords: [],
      dialogVisible: false,
      edittype: {}
    }
  },
  created() {
    this.getvmType()
  },
  methods: {
    search() {
      this.getvmType({
        name: this.input
      })
    },
    async getvmType(data) {
      const res = await vmvmTypeAPI(data)
      console.log(res)
      this.currentPageRecords = res.data.currentPageRecords
    },
    petImage(row) {
      return row.image
    },
    del() {
      this.$message.warning('演示系统，不支持此操作')
    },
    addType(row) {
      console.log(row)
      this.edittype = row
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.input {
  padding-left: 20px;
  width: 100%;
  height: 60px;
  background-color: #fff;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #606266;

  .el-input {
    margin-left: 20px;
  }

  .el-button {
    margin-left: 20px;
  }
}

.list {
  margin: 0 20px;
  background-color: #fff;
  padding: 20px;

  .el-button {
    margin-bottom: 20px;
  }
}

.updown {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  padding-left: 40px;
  margin-bottom: 40px;

  .el-button-group {
    margin-right: 40px;
  }

  .el-button {
    margin-right: 40px;
  }
}
</style>
